<style lang="less" scoped>
    .main {
        margin: 10px 100px;
    }

    .long-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .home-row {
        margin: 16px 0;
        .board-large {
            padding: 24px;
            background: rgba(255, 255, 255, 0.1);
            .title {
                line-height: 80px;
                font-size: 36px;
                font-weight: bold;
                text-align: center;
                .text {

                }
                .button {
                    color: #fff;
                    font-size: 24px;
                }
            }
        }
        .star-board {
            .star-info {
                .cell {
                    margin: 3px 0;
                    .head {
                        width: 160px;
                        height: 160px;
                    }
                    .text {
                        h3 {
                            line-height: 40px;
                        }
                        p {
                            line-height: 50px;
                        }
                    }
                }
            }
        }
        .board-small {
            padding: 12px;
            background: rgba(255, 255, 255, 0.1);
        }
        .notice-board {
            line-height: 50px;
        }
    }

    .notice-board h2 {
    }

    .notice-board a {
        color: #ffffff;
    }

    .dialog h2 {
        color: #000000;
        text-align: center;
    }

    .dialog p {
        color: #000000;
        font-size: 24px;
    }

    .color-board {
        cursor: pointer;
        padding: 40px 10px;
    }

    .color-board-half {
        cursor: pointer;
        padding: 25px 0;
    }

    .number {
        color: #ffff00;
        line-height: 80px;
    }

    .message {
        color: #ffffff;
        line-height: 80px;
    }

    .footer-row {
        font-size: 22px;
        text-align: center;
    }

    .course-card {
        margin-bottom: 5px;
        cursor: pointer;
    }

    .course-card-checked {
        background-color: #96c3f1;
    }

    .card-title {
        height: 24px;
    }

    .check-in-out-button {
        font-size: 36px;
    }
</style>

<template>
    <div class="main">
        <HeadTitle></HeadTitle>
        <Row :gutter="32" class="home-row">
            <i-col span="16">
                <div class="board-large star-board">
                    <Row class="title">
                        <i-col span="2">
                            <Button type="ghost" class="button" @click="leftChangeActiveStars">&lt;&lt;</Button>
                        </i-col>
                        <i-col span="20" class="text">
                            <Icon type="android-star"></Icon>
                            {{activeStarsTitles[activeStarsType]}}
                            <Icon type="android-star"></Icon>
                        </i-col>
                        <i-col span="2">
                            <Button type="ghost" class="button" @click="rightChangeActiveStars">&gt;&gt;</Button>
                        </i-col>
                    </Row>
                    <Row class="star-info">
                        <i-col span="8" v-for="star in activeStars" :key="star.id" class="cell">
                            <Row>
                                <i-col span="12">
                                    <img :src="star.headPath + star.head" class="head">
                                </i-col>
                                <i-col span="12" class="text">
                                    <h3 class="long-text">{{star.name}}</h3>
                                    <p>{{renderGender(star.gender)}}</p>
                                    <p>
                                        <Rate disabled v-model="star.rate"></Rate>
                                    </p>
                                </i-col>
                            </Row>
                        </i-col>
                    </Row>
                </div>
            </i-col>
            <i-col span="8">
                <div class="board-large notice-board">
                    <Row class="title">
                        <i-col span="5">
                            <Button type="ghost" class="button" @click="toggleNotices">&lt;&lt;</Button>
                        </i-col>
                        <i-col span="14" class="text">
                            {{noticesTitles[noticesType-1]}}
                        </i-col>
                        <i-col span="5">
                            <Button type="ghost" class="button" @click="toggleNotices">&gt;&gt;</Button>
                        </i-col>
                    </Row>
                    <Row v-for="notice in notices" :key="notice.id">
                        <i-col span="20" class="long-text">
                            <a @click="showNotice(notice)">{{notice.title}}</a>
                        </i-col>
                        <i-col span="4">
                            {{notice.publishDate.date().format("MM-DD")}}
                        </i-col>
                    </Row>
                </div>
            </i-col>
        </Row>
        <Row :gutter="32" class="home-row">
            <i-col span="16">
                <Row :gutter="32" style="text-align:center">
                    <i-col span="8">
                        <div class="color-board" style="background-color:#638c0b;" @click="toCourse">
                            <Icon type="ios-book" size="100"></Icon>
                            <h2>电大课程安排</h2>
                        </div>
                    </i-col>
                    <i-col span="8">
                        <div class="color-board" style="background-color:#ac6a00;" @click="toScenery">
                            <Icon type="images" size="100"></Icon>
                            <h2>风采展示</h2>
                        </div>
                    </i-col>
                    <i-col span="8">
                        <div class="color-board" style="background-color:#0075a9;" @click="toSchool">
                            <Icon type="ios-keypad" size="100"></Icon>
                            <h2>电大教学点</h2>
                        </div>
                    </i-col>
                </Row>
            </i-col>
            <i-col span="8">
                <Row :gutter="32" style="text-align:center">
                    <i-col span="12">
                        <div class="color-board" style="background-color:#a4005b;" @click="toTeacher">
                            <Icon type="ios-people" size="100"></Icon>
                            <h2>讲师介绍</h2>
                        </div>
                    </i-col>
                    <i-col span="12">
                        <Row :gutter="0">
                            <i-col span="24" style="padding:0;">
                                <div class="color-board-half" style="background-color:#638c0b;margin-bottom:10px;"
                                     @click="showCheckIn">
                                    <Icon type="android-calendar" size="50"></Icon>
                                    <h2 style="display:inline;"> 签到</h2>
                                </div>
                            </i-col>
                            <i-col span="24" style="padding:0;">
                                <div class="color-board-half" style="background-color:#ac6a00;margin-top:10px;"
                                     @click="showCheckOut">
                                    <Icon type="android-open" size="50"></Icon>
                                    <h2 style="display:inline;"> 签出</h2>
                                </div>
                            </i-col>
                        </Row>
                    </i-col>
                </Row>
            </i-col>
        </Row>
        <Row :gutter="32" className="home-row">
            <i-col span="16">
                <Row :gutter="32">
                    <i-col span="8">
                        <div class="board-small">
                            <span class="number">{{attendances.length}}</span> | <a class="message"
                                                                                    @click="showAttendances">今日课程签到人数</a>
                        </div>
                    </i-col>
                    <i-col span="8">
                        <div class="board-small">
                            <span class="number">{{computeEnrollCount}}</span> | <a class="message"
                                                                                    @click="showCourses">今日课程报名人数</a>
                        </div>
                    </i-col>
                    <i-col span="8">
                        <div class="board-small">
                            <span class="number">{{totalCheckInCount}}</span> | <span class="message">累计签到人次</span>
                        </div>
                    </i-col>
                </Row>
            </i-col>
            <i-col span="8">
                <div class="board-small">
                    <p class="message">{{welcomeMessage}}</p>
                </div>
            </i-col>
        </Row>
        <Row className="footer-row">
            <i-col :span="24">
                <p>主办单位：浙江老年电视大学安吉分校，安吉县老年电视大学，浙江老年远程教育（互联网）学院；协办单位：安吉县老年学学会；技术支持：平湖皓月朝阳科技有限公司</p>
            </i-col>
        </Row>
        <Modal v-model="noticeModal" width="960" className="dialog">
            <h2 slot="header">{{currentNotice.title}}</h2>
            <p>{{currentNotice.content}}</p>
            <div slot="footer"></div>
        </Modal>
        <Modal v-model="attendanceModal" width="1200" className="dialog">
            <h2 slot="header">今日签到情况</h2>
            <Table border height="780" size="large" :columns="attendanceColumns" :data="attendances"></Table>
            <div slot="footer"></div>
        </Modal>
        <Modal v-model="courseModal" width="1200" className="dialog">
            <h2 slot="header">今日课程情况</h2>
            <Table border height="640" size="large" :columns="courseColumns" :data="courses"></Table>
            <div slot="footer"></div>
        </Modal>
        <Modal v-model="checkInModal" width="1200" className="dialog">
            <h2 slot="header">请选择课程后签到</h2>
            <Row :gutter="32">
                <i-col span="6" v-for="tc in courses" :key="tc.course.id">
                    <Card class="course-card" :class="{'course-card-checked': tc.course.checked}"
                          @click.native="clickCourseCard(tc.course)">
                        <p slot="title" class="card-title">
                            <Icon type="ios-book"></Icon>
                            {{tc.course.name}}
                        </p>
                        <p>开课时间：{{tc.course.startTime}}</p>
                        <p>课程讲师：{{tc.teacher.name}}</p>
                    </Card>
                </i-col>
            </Row>
            <div v-if="selectedCourse">
                <Row type="flex" justify="center" style="margin-top:24px;">
                    <i-col span="12" style="text-align:center;">
                        <p>请刷卡或输入卡号</p>
                    </i-col>
                </Row>
                <Row type="flex" justify="center">
                    <i-col span="12">
                        <Input v-model="checkInCardNum" size="large" autofocus @on-enter="checkIn()"
                               class="check-in-text"/>
                    </i-col>
                </Row>
            </div>
            <div slot="footer">
                <Row :gutter="128">
                    <i-col span="12" style="text-align:center;">
                        <Button type="primary" size="large" icon="android-calendar" long class="check-in-out-button"
                                @click="checkIn()">
                            签到
                        </Button>
                    </i-col>
                    <i-col span="12" style="text-align:center;">
                        <Button size="large" long class="check-in-out-button" @click="cancelCheckIn()">取消</Button>
                    </i-col>
                </Row>
            </div>
        </Modal>
        <Modal v-model="checkOutModal" width="1200" className="dialog">
            <h2 slot="header">请选择课程后签出</h2>
            <Row :gutter="32">
                <i-col span="6" v-for="tc in courses" :key="tc.course.id">
                    <Card class="course-card" :class="{'course-card-checked': tc.course.checked}"
                          @click.native="clickCourseCard(tc.course)">
                        <p slot="title" class="card-title">
                            <Icon type="ios-book"></Icon>
                            {{tc.course.name}}
                        </p>
                        <p>开课时间：{{tc.course.startTime}}</p>
                        <p>课程讲师：{{tc.teacher.name}}</p>
                    </Card>
                </i-col>
            </Row>
            <div v-if="selectedCourse">
                <Row type="flex" justify="center" style="margin-top:24px;">
                    <i-col span="12" style="text-align:center;">
                        <p>请刷卡或输入卡号</p>
                    </i-col>
                </Row>
                <Row type="flex" justify="center">
                    <i-col span="12">
                        <Input v-model="checkOutCardNum" size="large" autofocus @on-enter="checkIn()"
                               class="check-in-text"/>
                    </i-col>
                </Row>
            </div>
            <div slot="footer">
                <Row :gutter="128">
                    <i-col span="12">
                        <Button type="primary" size="large" icon="android-open" long class="check-in-out-button"
                                @click="checkOut()">
                            签出
                        </Button>
                    </i-col>
                    <i-col span="12">
                        <Button size="large" long class="check-in-out-button" @click="cancelCheckOut()">取消</Button>
                    </i-col>
                </Row>
            </div>
        </Modal>
    </div>
</template>

<script>
    import Axios from "../axios";
    import Common from "../common";
    import HeadTitle from "./component/HeadTitle.vue";

    export default {
        components: {HeadTitle},
        name: "home",
        data() {
            return {
                activeStarsType: 0,
                activeStarsTitles: ["月度活跃学员", "月度优秀讲师", "月度优秀员工"],
                activeStars: [],
                noticesType: 1,
                noticesTitles: ["通知公告", "新闻动态"],
                notices: [],
                noticeModal: false,
                currentNotice: {},
                attendanceModal: false,
                attendances: [],
                courseModal: false,
                courses: [],
                checkInModal: false,
                checkOutModal: false,
                checkInCardNum: "",
                checkOutCardNum: "",
                selectedCourse: null,
                totalCheckInCount: 0,
                welcomeMessage: "",
                attendanceColumns: [
                    {
                        title: "序号",
                        type: "index"
                    },
                    {
                        title: "姓名",
                        render: (h, params) => {
                            return params.row.elderName;
                        }
                    },
                    {
                        title: "性别",
                        render: (h, params) => {
                            return Common.renderGender(params.row.elderGender);
                        }
                    },
                    {
                        title: "年龄",
                        render: (h, params) => {
                            return params.row.elderAge;
                        }
                    },
                    {
                        title: "课程",
                        width: 350,
                        render: (h, params) => {
                            return params.row.courseName + " " + this.renderCourseTime(params.row.courseStartTime)
                        }
                    }
                ],
                courseColumns: [
                    {
                        title: "序号",
                        type: "index",
                        width: 100
                    },
                    {
                        title: "开课时间",
                        render: (h, params) => {
                            return params.row.course.startTime;
                        }
                    },
                    {
                        title: "课程名称",
                        render: (h, params) => {
                            return params.row.course.name;
                        }
                    },
                    {
                        title: "讲师",
                        render: (h, params) => {
                            return params.row.teacher.name;
                        }
                    },
                    {
                        title: "签到/报名人数",
                        render: (h, params) => {
                            const ac = params.row.course.attendanceCount ? params.row.course.attendanceCount : 0;
                            const ec = params.row.course.enrollCount ? params.row.course.enrollCount : 0;
                            return ac + " / " + ec;
                        }
                    }
                ]
            }
        },
        mounted() {
            this.getActiveStars();
            this.getNotices();
            this.getTodayAttendanceStatus();
            this.getTotalCheckIns();

            Axios.get("/actions/cs").then((response) => {
                if (response.status === 200) {
                    this.courses = response.data;
                } else {
                    this.$Message.error("获取课程信息失败。");
                }
            });

            this.welcomeMessage = "欢迎来到安吉老年电大学校";
        },
        computed: {
            computeEnrollCount() {
                let count = 0;
                for (let i = 0; i < this.courses.length; i++) {
                    count += this.courses[i].course.enrollCount;
                }
                return count;
            }
        },
        methods: {
            getElderActiveStars() {
                Axios.get("/elders/active-stars?top=6").then((response) => {
                    if (response.status === 200) {
                        this.activeStars = response.data.content;
                    } else {
                        this.$Message.error("获取活跃学员信息失败。");
                    }
                });
            },
            getTeacherActiveStars() {
                Axios.get("/teachers/active-stars?top=6").then((response) => {
                    if (response.status === 200) {
                        this.activeStars = response.data.content;
                    } else {
                        this.$Message.error("获取优秀讲师信息失败。");
                    }
                });
            },
            getStaffActiveStars() {
                Axios.get("/staffs/active-stars?top=6").then((response) => {
                    if (response.status === 200) {
                        this.activeStars = response.data.content;
                    } else {
                        this.$Message.error("获取优秀员工信息失败。");
                    }
                });
            },
            getActiveStars() {
                if (this.activeStarsType === 0) {
                    this.getElderActiveStars();
                } else if (this.activeStarsType === 1) {
                    this.getTeacherActiveStars();
                } else if (this.activeStarsType === 2) {
                    this.getStaffActiveStars();
                }
            },
            leftChangeActiveStars() {
                this.activeStarsType--;
                if (this.activeStarsType < 0) {
                    this.activeStarsType = 2;
                }
                this.getActiveStars();
            },
            rightChangeActiveStars() {
                this.activeStarsType++;
                if (this.activeStarsType > 2) {
                    this.activeStarsType = 0;
                }
                this.getActiveStars();
            },
            getNotices() {
                Axios.get("/notices/newest?type=" + this.noticesType).then((response) => {
                    if (response.status === 200) {
                        this.notices = response.data.content;
                    } else {
                        this.$Message.error("获取通知信息失败。");
                    }
                });
            },
            toggleNotices() {
                this.noticesType = this.noticesType === 1 ? 2 : 1;
                this.getNotices();
            },
            getTodayAttendanceStatus() {
                Axios.get("/attendance/1").then((response) => {
                    if (response.status === 200) {
                        this.attendances = response.data;
                    } else {
                        this.$Message.error("获取签到信息失败。");
                    }
                });
            },
            getTotalCheckIns() {
                Axios.get("/attendance/checkins").then((response) => {
                    if (response.status === 200) {
                        this.totalCheckInCount = response.data;
                    } else {
                        this.$Message.error("获取累计签到信息失败。");
                    }
                });
            },
            renderGender(gender) {
                return Common.renderGender(gender);
            },
            renderCourseTime(time) {
                const d = new Date(time);
                return d.format("hh:mm");
            },
            showNotice(notice) {
                this.currentNotice = notice;
                this.noticeModal = true;
            },
            toCourse() {
                this.$router.push("/course");
            },
            toScenery() {
                this.$router.push("/scenery");
            },
            toSchool() {
                this.$router.push("/intro-list");
            },
            toTeacher() {
                this.$router.push("/teacher");
            },
            showAttendances() {
                this.attendanceModal = true;
            },
            showCourses() {
                this.courseModal = true;
            },
            clickCourseCard(course) {
                this.courses.forEach(item => item.course.checked = false);
                course.checked = true;
                this.selectedCourse = course;
            },
            showCheckIn() {
                this.selectedCourse = null;
                this.checkInCardNum = "";
                this.courses.forEach(item => item.course.checked = false);
                this.checkInModal = true;
            },
            showCheckOut() {
                this.selectedCourse = null;
                this.checkOutCardNum = "";
                this.courses.forEach(item => item.course.checked = false);
                this.checkOutModal = true;
            },
            checkIn() {
                const params = {
                    bindCode: this.checkInCardNum,
                    courseId: this.selectedCourse.id,
                    actionType: 1
                };

                Axios.post("/attendance", params).then((response) => {
                    if (response.status === 200) {
                        this.checkInModal = false;

                        const elder = response.data.elder;
                        const course = response.data.course;

                        if (response.data.code === 0) {
                            this.$Modal.success({
                                title: "签到成功",
                                content: "老人：" + elder.name + "[" + this.checkInCardNum + "]成功签到课程：" + course.name
                            });
                            this.getTodayAttendanceStatus();
                            this.getTotalCheckIns();
                        } else if (response.data.code === 1) {
                            this.$Modal.error({
                                title: "签到失败",
                                content: "没有找到卡号为[" + this.checkInCardNum + "]的老人信息，请确认该卡是否已经登录。"
                            });
                        } else if (response.data.code === 2) {
                            this.$Modal.error({
                                title: "签到失败",
                                content: "老人：" + elder.name + "[" + this.checkInCardNum + "]已经签到课程：" + course.name + "，请不要重复签到。",
                            });
                        }
                    } else {
                        this.$Message.error("签到失败。");
                    }
                });
            },
            cancelCheckIn() {
                this.checkInModal = false;
            },
            checkOut() {
                const params = {
                    bindCode: this.checkOutCardNum,
                    courseId: this.selectedCourse.id,
                    actionType: 2
                };

                Axios.post("/attendance", params).then((response) => {
                    if (response.status === 200) {
                        this.checkOutModal = false;

                        const elder = response.data.elder;
                        const course = response.data.course;

                        if (response.data.code === 0) {
                            this.$Modal.success({
                                title: "签出成功",
                                content: "老人：" + elder.name + "[" + this.checkOutCardNum + "]成功签出课程：" + course.name
                            });
                        } else if (response.data.code === 1) {
                            this.$Modal.error({
                                title: "签出失败",
                                content: "没有找到卡号为[" + this.checkOutCardNum + "]的老人信息，请确认该卡是否已经登录。"
                            });
                        } else if (response.data.code === 2) {
                            this.$Modal.error({
                                title: "签出失败",
                                content: "老人：" + elder.name + "[" + this.checkOutCardNum + "]已经签出课程：" + course.name + "，请不要重复签出。",
                            });
                        }
                    } else {
                        this.$Message.error("签出失败。");
                    }
                });
            },
            cancelCheckOut() {
                this.checkOutModal = false;
            }
        }
    }
</script>
